<template>
  <div class='container'>
    <div class="app-container">
      <el-card>
        <el-tabs>
          <el-tab-pane :label="title">
            <el-form
              label-width="80px"
              :model="fromData"
              :rules="rules"
              ref="fromInfo"
              class="fromsty"
            >
              <!-- 学科 -->
              <el-form-item
                label="学科:"
                prop="subjectID"
              >
                <el-select
                  v-model="fromData.subjectID"
                  placeholder="请选择"
                  style="width:480px"
                >
                  <el-option
                    v-for="item in subjectList"
                    :key="item.value"
                    :label="item.label"
                    :value="item.value"
                  ></el-option>
                </el-select>
              </el-form-item>
              <!-- 目录 -->
              <el-form-item
                label="目录:"
                prop="catalogID"
              >
                <el-select
                  placeholder="请选择"
                  style="width:480px"
                  v-model="fromData.catalogID"
                >
                  <el-option
                    v-for="item in directoryList"
                    :key="item.value"
                    :label="item.label"
                    :value="item.value"
                  ></el-option>
                </el-select>
              </el-form-item>
              <!-- 企业 -->
              <el-form-item
                label="企业:"
                prop="enterpriseID"
              >
                <el-select
                  placeholder="请选择"
                  style="width:480px"
                  v-model="fromData.enterpriseID"
                >
                  <el-option
                    v-for="item in companyLists"
                    :key="item.id"
                    :label="item.shortName"
                    :value="item.id"
                  ></el-option>
                </el-select>
              </el-form-item>
              <!-- 城市 -->
              <el-form-item
                label="城市"
                required
              >
                <el-col :span="4">
                  <el-form-item prop="province">
                    <el-select
                      v-model="fromData.province"
                      prop="province"
                      @change="change"
                    >
                      <el-option
                        v-for="(item,index) in provincesList"
                        :key="index"
                        :label="item"
                        :value="item"
                      ></el-option>
                    </el-select>
                  </el-form-item>
                </el-col>
                <el-col :span="4">
                  <el-form-item prop="city">
                    <el-select
                      v-model="fromData.city"
                      prop="city"
                    >
                      <el-option
                        v-for="(item,index) in cityList"
                        :key="index"
                        :label="item"
                        :value="item"
                      ></el-option>
                    </el-select>
                  </el-form-item>
                </el-col>
              </el-form-item>

              <!-- 方向 -->
              <el-form-item
                label="方向:"
                prop="direction"
              >
                <el-select
                  placeholder="请选择"
                  v-model="fromData.direction"
                >
                  <el-option
                    v-for="(item,index) in questionLists"
                    :key="index"
                    :label="item.direction"
                    :value="item.direction"
                  />
                </el-select>
              </el-form-item>
              <!-- 题型 -->
              <el-form-item
                label="题型:"
                prop="questionType"
              >
                <el-radio-group v-model="fromData.questionType">
                  <el-radio label="1">单选</el-radio>
                  <el-radio label="2">多选</el-radio>
                  <el-radio label="3">简答</el-radio>
                </el-radio-group>
              </el-form-item>
              <!-- 难度 -->
              <el-form-item
                label="难度:"
                prop="difficulty"
              >
                <el-radio-group v-model="fromData.difficulty">
                  <el-radio label="1">简单</el-radio>
                  <el-radio label="2">一般</el-radio>
                  <el-radio label="3">困难</el-radio>
                </el-radio-group>
              </el-form-item>

              <!--题干 富文本 -->
              <el-form-item
                label="题干:"
                prop="question"
              >
                <quillEditor
                  :data="problemTg"
                  v-model="fromData.question"
                  style="margin-left:5px"
                ></quillEditor>
              </el-form-item>

              <!-- 选项 -->
              <el-form-item label="选项:">
                <!-- 单选 -->
                <el-radio-group
                  v-model="Radios"
                  v-if="fromData.questionType == 1"
                >
                  <el-radio
                    style="display:block;margin-bottom:5px"
                    v-for="item in option"
                    :key="item.code"
                    :label="item.code"
                  >
                    <span>{{ item.code }}:</span>
                    <el-input
                      v-model="item.title"
                      :label="item.title"
                    />
                    <!-- 上传图片 -->
                    <imgUpload
                      ref="photo"
                      style="display:inline-block"
                    ></imgUpload>
                  </el-radio>
                  <el-button
                    type="danger"
                    disabled
                    class="btnstyle"
                  >+添加选项与答案</el-button>
                </el-radio-group>
                <!-- 多选 -->
                <el-checkbox-group
                  v-model="fromData.options"
                  v-else-if="fromData.questionType == 2"
                >
                  <el-checkbox
                    style="display:block;margin-bottom:5px"
                    v-for="(item,index) in option"
                    :key="index"
                    :label="item"
                  >
                    <span>{{ item.code }}:</span>
                    <el-input
                      v-model="item.title"
                      :label="item.title"
                      :value="item.title"
                    />
                    <imgUpload
                      ref="photo"
                      style="display:inline-block"
                    ></imgUpload>
                  </el-checkbox>
                  <el-button
                    type="danger"
                    class="btnstyle"
                    :disabled="forbid"
                    @click="addSelec"
                  >+添加选项与答案</el-button>
                </el-checkbox-group>
                <!-- 简答 -->
                <el-input
                  v-else
                  v-model="optionVal"
                  style="width:480px"
                ></el-input>
              </el-form-item>
              <!-- 选项结束 -->

              <!-- 解析视频 -->
              <el-form-item label="解析视频:">
                <el-input
                  v-model="fromData.videoURL"
                  style="width:480px"
                ></el-input>
              </el-form-item>
              <!-- 答案解析 -->
              <el-form-item
                label="答案解析:"
                prop="answer"
              >
                <quillEditor
                  :data="problemJx"
                  v-model="fromData.answer"
                  style="margin-left:5px"
                ></quillEditor>
              </el-form-item>
              <!-- 题目备注 -->
              <el-form-item label="题目备注:">
                <el-input
                  style="width:480px"
                  type="texteare"
                  v-model="fromData.remarks"
                ></el-input>
              </el-form-item>
              <!-- 试题标签 -->
              <el-form-item label="试题标签:">
                <el-select
                  v-model="fromData.tags"
                  placeholder="请选择"
                  multiple
                  multiple-limit="1"
                >
                  <el-option
                    v-for="(item,index) in tagsInfo"
                    :label="item.label"
                    :key="index"
                    :value="item.value"
                  ></el-option>
                </el-select>
              </el-form-item>
              <!-- button按钮 -->
              <el-form-item>
                <el-button
                  type="primary"
                  @click="btnOK"
                >{{ btntitle}}</el-button>
              </el-form-item>
            </el-form>
          </el-tab-pane>
        </el-tabs>
      </el-card>
    </div>
  </div>
</template>

<script>
import quillEditor from '@/components/quillEditor' // 富文本编辑器
import { add, update, detail, List } from '@/api/hmmm/questions' // 添加试题 编辑试题 基础题库
import { simple } from '@/api/hmmm/subjects' // 获取学科简单列表
import { directorySimple } from '@/api/hmmm/directorys' // 获取目录简单列表
import { list } from '@/api/hmmm/companys' // 获取企业列表
import { provinces, citys } from '@/api/hmmm/citys' // 引入城市数据
import { tagSimple } from '@/api/hmmm/tags' // 标签
import imgUpload from '@/module-hmmm/components/imgUpload'
export default {
  components: {
    quillEditor,
    imgUpload
  },

  data () {
    return {
      optionVal: '',
      problemTg: '',
      problemJx: '',
      url: '',
      forbid: false,
      Radios: {},
      option: [
        // 是否正确答案，代码，标题，图片URL
        { code: 'A', title: '', img: '', isRight: 1 },
        { code: 'B', title: '', img: '', isRight: 1 },
        { code: 'C', title: '', img: '', isRight: 1 },
        { code: 'D', title: '', img: '', isRight: 1 }
      ], // 选项
      tagsInfo: '', // 试题标签
      questionLists: '', // 基础题库列表
      provincesList: '', // 主城市列表
      cityList: '', // 副城市列表
      companyLists: '', // 企业列表
      directoryList: '', // 目录简单列表
      subjectList: '', // 学科简单列表
      fromData: {
        subjectID: '', // 学科
        catalogID: '', // 目录
        enterpriseID: '', // 企业
        province: '', // 城市
        city: '', // 地区
        direction: '', // 方向
        questionType: '1', // 题型
        difficulty: '1', // 难度
        question: '', // 题干
        options: [], // 选项
        videoURL: '', // 解析视频
        answer: '', // 答案解析
        remarks: '', // 题目备注
        tags: '' // 试题标签
      },
      rules: {
        subjectID: { required: true, message: '请输入', trigger: 'blur' },
        catalogID: { required: true, message: '请输入', trigger: 'blur' },
        enterpriseID: { required: true, message: '请输入', trigger: 'blur' },
        city: { required: true, message: '请输入', trigger: 'blur' },
        province: { required: true, message: '请输入', trigger: 'blur' },
        direction: { required: true, message: '请输入', trigger: 'blur' },
        question: { required: true, message: '请输入', trigger: 'blur' },
        questionType: { required: true, message: '请输入', trigger: 'blur' },
        difficulty: { required: true, message: '请输入', trigger: 'blur' },
        answer: { required: true, message: '请输入', trigger: 'blur' }
      }
    }
  },
  created () {
    this.questionList()
    this.simple()
    this.directorySimple()
    this.companyList()
    this.tagSimple()
    this.cityInfo()
    this.detail()
  },
  watch: {},
  computed: {
    title () {
      return this.$route.params.id ? '编辑试题' : '添加试题'
    },
    btntitle () {
      return this.$route.params.id ? '确认修改' : '确认提交'
    }
  },
  methods: {
    // 获取学科简单列表
    async simple () {
      const { data } = await simple()
      // console.log(data)
      this.subjectList = data
    },
    // 获取目录简单列表
    async directorySimple () {
      const { data } = await directorySimple()
      // console.log(data)
      this.directoryList = data
    },
    // 获取企业名称列表
    async companyList () {
      const { data } = await list({
        page: 1,
        pagesize: 100
      })
      // console.log(data)
      this.companyLists = data.items
    },
    // 城市数据
    async cityInfo () {
      this.provincesList = provinces() //  获取city数据
    },
    // 选中值发生变化时触发
    change (val) {
      // console.log(val)
      const result = citys(val)
      this.cityList = result
      // console.log(result)
    },
    // 基础题库列表
    async questionList () {
      const { data } = await List()
      // console.log(data)
      this.questionLists = data.items
    },
    // 获取标签列表
    async tagSimple () {
      const { data } = await tagSimple()
      // console.log(data)
      this.tagsInfo = data
    },
    // 添加选项
    addSelec () {
      let code = ''
      switch (this.option.length) {
        case 4:
          code = 'E'
          break
        case 5:
          code = 'F'
          break
        // case 6:
        //   code = 'G'
        //   break
        // case 7:
        //   code = 'H'
        //   break
        // case 8:
        //   code = 'E'
        //   break
      }
      if (this.option.length >= 4) {
        this.forbid = true
      }
      this.option.push({ isRight: false, code: code, title: '', img: '' })
    },
    // imgInfo (item, res) {
    //   this.url = res
    //   console.log(item, res)
    //   item.url = res
    // },
    // 提交
    async btnOK () {
      try {
        await this.$refs.fromInfo.validate() // 手动校验
        // console.log(this.fromData) // 所有数据
        // 获取选择框的值
        if (this.fromData.questionType === 1) {
          // 判断单选选中值在数组中的索引
          const num = this.option.indexOf(this.Radios)
          // console.log(num) // 索引 1
          this.option[num].isRight = 0
          // console.log(this.option) // 所有选框数据 2
          // console.log(this.fromData.options) //3
          this.fromData.options = this.option
          // console.log(this.fromData.options) // 要提交数据4
        } else if (this.fromData.questionType === 2) {
          // console.log('修改前', this.fromData.options) // 修改前
          this.fromData.options.map(item => {
            const num = this.option.indexOf(item)
            this.option[num].isRight = 0
          })
          this.fromData.options = this.option
        } else {
          this.fromData.options[0] = { code: 'A', title: 'this.optionVal', img: '', isRight: 1 }
          console.log(this.optionVal)
        }
        // console.log('修改', this.option)
        // console.log('要提交', this.fromData.options)
        if (this.$route.params.id) {
          await update(this.fromData)
        } else {
          // 提交数据
          await add(this.fromData)
          this.$message.success('添加成功')
        }
      } catch (err) {
        console.log(err, '检验失败')
      }
    },
    // 获取数据
    async detail () {
      // const { data } = await detail({ id: 36 })
      const { data } = await detail(this.$route.params.id)
      if (data.questionType === 3) {
        this.fromData.options = data.options
        this.optionVal = this.fromData.options[0].title
      }
      // 获取到data.options中isRight为0的项，赋值code给Radios
      const result = data.options.map((item, index) => {
        if (item.isRight === 0) {
          return index
        }
      })
      this.Radios = data.options[result]
      console.log(data)
      this.fromData = data
      this.problemTg = data.question
      this.problemJx = data.answer
      console.log(this.problemTg, this.problemJx)
      if (this.data.options.some(item => { return Boolean(item.img) })) {
        this.data.options.map(item => {
          this.$refs.photo.imageUrl = item.img
        })
      }
    }
  }
}
</script>

<style scoped lang='scss'>
.btnstyle {
  // background-color: rgb(159, 14, 14);
  // color: #fff;
  display: block;
}
::v-deep .fromsty {
  margin-left: 20px;
}
::v-deep .el-input.el-input--medium {
  margin-right: 10px;
}
</style>
